<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .c {
            background-color: #1b6d85;
            height: 100px;
        }
        .nav {
            position: relative;
        }
        .navbar {
            height: 50px;
            line-height: 50px;
            background-color: blue;
            color:white;
            width:100%
        }
        .clearfix:after,.clearfix:before{
            display: table;
            content: '';
        }
        .clearfix:after{
            clear: both;
        }
        .clearfix{
            zoom:1;
        }
    </style>
    <script>
        window.onload = function () {
            var navbar = document.getElementById('navbar');
            var parent = navbar.parentNode;
            window.onscroll = function(){
                var pTop = parent.offsetTop;//固定的
                var navbarTop = navbar.offsetTop;   //0
                var bst = document.body.scrollTop; //变化的
                if (bst>pTop){
                    navbar.style.position = 'absolute';
                    navbar.style.top = bst-pTop+'px';

                } else {
                    navbar.style.position = 'static';
                }
                console.log(pTop);
                console.log(navbarTop);
                console.log(bst);
            }
        }
    </script>
</head>
<body>
<div class="c">网页头部</div>
<div class="c">网页logo</div>
<div class="nav clearfix">
    <div id="navbar" class="navbar">这些是网站导航</div>
</div>
<div>
    <p>内容</p>
    <p>内容</p>
    <p>内容</p>
    <p>内容</p>
    <p>内容</p>
    <p>内容</p>
    <p>内容</p>
    <p>内容</p>
    <p>内容</p>
    <p>内容</p>
    <p>内容</p>
    <p>内容</p>
    <p>内容</p>
    <p>内容</p>
    <p>内容</p>
    <p>内容</p>
    <p>内容</p>
    <p>内容</p>
    <p>内容</p>
    <p>内容</p>
    <p>内容</p>
    <p>内容</p>
    <p>内容</p>
    <p>内容</p>
    <p>内容</p>
    <p>内容</p>
    <p>内容</p>
    <p>内容</p>
    <p>内容</p>
    <p>内容</p>
    <p>内容</p>
    <p>内容</p>
    <p>内容</p>
    <p>内容</p>
    <p>内容</p>
    <p>内容</p>
    <p>内容</p>
    <p>内容</p>
    <p>内容</p>
    <p>内容</p>
</div>
</body>
</html>